<!-- 三会一课 -->
<template>
  <div>
    <van-nav-bar
      title="三会一课"
      left-arrow
      @click-left="$router.push('/')"
    />
    <!-- 顶部提示语 -->
    <div v-if="notice.noticeresults.length>0" class="border-bottom-one-rem topNotice">
      <img :src="smallBell" alt="">
      <marquee class="marqueeNotice" behavior="scroll" direction="left">
        <div 
          class="a"
          @click="turnHref(item.url)" 
          v-for="(item,i) in notice.noticeresults" 
          :key="i">
          {{item.title}}
        </div>
      </marquee>
    </div>
    <!-- 通知列表 -->
    <div class="border-bottom-one-rem topNotice" v-for="(item,i) in notice.approvalnoticeresults" :key="i" >
      <img src="../../assets/Notice.png" alt="">
      <marquee 
        class="marqueeNotice"
        behavior="scroll" 
        direction="left">
        {{item.title}}
      </marquee>
    </div>
    <!-- 仪表盘 -->
    <dashboard :angle='notice.meetingmaincountresults'></dashboard>
    <!-- 选项卡 -->
    <div class="tabs">
      <div
        @click="currentTab=i" 
        :class="i==currentTab?'tabActive':''" 
        v-for="(item,i) in tabs" 
        :key="i">{{item}}</div>
    </div>
    <!-- 表格 -->
    <div style="padding:0 3.4rem">
      <noSencondLevelTable :tableData="tableData"></noSencondLevelTable>
    </div>
    <div v-if="tableData.tbody.length>=8" class="lookMore" @click="lookMore">
      {{isMore?'查看更多':'收起'}}
      <span class="iconSpan"><svg-icon :icon-class="isMore?'xiala':'shouqi'"></svg-icon></span>
    </div>
  </div>
</template>

<script>
import smallBell from '../../assets/smallBell.png'
import dashboard from '../canvas/dashboard'
import { getUserInfo } from '@/api/index.js'
import noSencondLevelTable from '../components/noSencondLevelTable'
export default {
  components: {dashboard,noSencondLevelTable},
  data() {
  return {
      smallBell:smallBell,
      isMore:false,
      notice:{
        noticeresults:[
          {title:'这是第二条通知',url:'https://www.baidu.com/'},
          {title:'这是第三条通知',url:'https://www.baidu.com/'},
          {title:'这是第四条通知',url:'https://www.baidu.com/'}
        ],
        meetingmaincountresults:0
      },
      tabs:['党员大会','支委会','党小组会','党课'],
      currentTab:0,
      data:{
        "methodName":"getMeetingMainOne",
         "usercode":"",
         "roleid":"",
         "serviceName":"PersonalInfo"
      },
      requestData:{ // 请求表格的参数
        "methodName":"getMeetingMainList",
        "usercode":"",
        "roleid":"",
        "serviceName":"PersonalInfo",
        "typeid":'1',
        pageindex:'1',
        pagesize:'8'
      },
      tableData:{
        thead:[
          {prop:'title',label:'会议名称',width:'flex4'},
          {prop:'topic',label:'议题',width:'flex3'},
          {prop:'begintime',label:'会议时间',width:'flex2'}
        ],
        isNeedDetails:true,
        tbody:[]
      }
    };
  },
  watch:{
    'currentTab':{
      handler(newVal){
        this.getLocalData()
        this.requestData.typeid = newVal+1
        this.isMore = false
        this.getMeetingMainList()
      },
      immediate:true
    }
  },
  created(){
    this.getLocalData()
    this.getUserInfo(this.data)
  },
  methods: {
    turnHref(url){ // url跳转,a标签会认为是route进行跳转,外部链接需要用js来实现跳转
      window.location.href = url;
    },
    getUserInfo(data){// 获取用户信息
      getUserInfo(data).then(res=>{
        if (res.status == 1) {
          this.notice = res.data
        } else{
          this.$toast(res.message)
        }
      })
    },
    lookMore(){ //查看更多|收起
      if(this.isMore){
        let pageindex = Number(this.requestData.pageindex);
        pageindex += 1
        this.requestData.pageindex = pageindex.toString()
      } else {
        this.requestData.pageindex = '1'
      }
      this.getMeetingMainList()
    },
    getMeetingMainList(){
      getUserInfo(this.requestData).then(res=>{
        if (res.status==1) {
          if (this.isMore) {
            this.tableData.tbody.push(...res.data.meetingMains)
            if (this.tableData.tbody.length%8==0) {
              this.isMore = true
            }else{
              this.isMore = false
            }
          }else{
            this.tableData.tbody = res.data.meetingMains
            this.isMore = true
          } 
        } else{
          this.$toast(res.message)
        }
      })
    },
    getLocalData(){
      this.requestData.usercode = window.localStorage.getItem('usercode')
      this.requestData.roleid = window.localStorage.getItem('roleId')
      this.data.usercode = window.localStorage.getItem('usercode')
      this.data.roleid = window.localStorage.getItem('roleId')
    }
  }
}
</script>
<style scoped>
.lookMore{
  color:#BB383E;
  text-align: center;
  font-size: 2rem;
  padding: 1rem 0;
}
.marqueeNotice{
  font-size: 14px;
  color: #BB383E;
}
.topNotice{
  display: flex;
  align-items: center;
  height: 44px;
}
.topNotice img{
  width: 17px;
  height: 17px;
  margin:0 1.4rem 0 3.1rem ;
}
.tabs{
  display: flex;
  padding: 0 3.4rem;
  justify-content: space-between;
  align-items: center;
  background: #f4f4f4;
  height: 35px;
  width: 100%;
}
.tabActive{
  color: #1892FF ! important;
}
.tabs div{
  width: 80px;
  height: 25px;
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  background: #fff;
  align-items: center;
}
.a{
  display: inline-block;
  margin: 0 1rem;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>